import { Key, ReactChild, ReactFragment, ReactPortal, useEffect } from 'react';
import { useDispatch, useSelector, KnowledgeModelState, NavLink } from 'umi' 
import style from './knowledge.less'
import styles from '../index.less'
import styless from '@/components/essay/index.less';
import {  EyeOutlined, PartitionOutlined } from '@ant-design/icons';
import Recommendread from "@/components/essay/recommendread"
import Articlecategory from "@/components/essay/Articlecategory"
 const classNames = require('classnames');
export default function Knowledge() {
  const dispatch = useDispatch(); 
  const { knowledgeList } = useSelector((state: { knowledge: KnowledgeModelState }) => state.knowledge);
  console.log(knowledgeList);

  useEffect(() => {
    dispatch({
      //  命名空间
      type: "knowledge/getknowledgeList"
    })
    dispatch({
      //  命名空间
      type: "knowledge/getreadingList"
    })
  }, [])
 
  return (
    <div className={styles.articleAll}>
    <div className={classNames(styles.container1, styles.view)}>
      <div className={classNames(styles.content1)}>
        <div className={styles.leftarticle}>
        {
  knowledgeList.map((item: { id: Key | null | undefined; title: boolean | ReactChild | ReactFragment | ReactPortal | null | undefined; cover: string | undefined; summary: boolean | ReactChild | ReactFragment | ReactPortal | null | undefined; views: boolean | ReactChild | ReactFragment | ReactPortal | null | undefined; }) => {
    return <div key={item.id} className={style.knowledgehex} >
      <NavLink style={{color:'#000'}} to={`/knowledge/${item.id}`}>
        <div className= {style.knowledgetitle}>
          <h3>{item.title}</h3> <s>|</s> <span>6个月前</span>
          </div>
      <dl>
        <dt className={style.knowledgedt}><img src={item.cover} alt=""/></dt>
        <dd >
          <div >{item.summary}</div>
          <p> <span>
           <EyeOutlined/>
            <span>{item.views}</span>
            </span>  
            <s>·</s>
            <span> <PartitionOutlined/></span>
            <span>分享</span>
            </p>
        </dd>
      </dl>
      </NavLink>
       
    </div>
  })
}
         
        </div>
        <div className={styless.sidebar}>
          <div className={styless.sidebarins_1}>
            <div className={styless.sidebarins_2}>
              <Recommendread />
            </div>
            <div className={styless.sidebarins_3}>
              <Articlecategory />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  );
}


